<template>
    <div ref="canvasContainer" class="box"></div>
  </template>
  <script>
  import * as THREE from "three";
  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
  import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
  
  export default {
    mounted() {
      // 1. 创建场景
      const scene = new THREE.Scene();
  
      // 2. 创建相机
      const camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );
  
      // 2.1 设置相机位置
            camera.position.z = 30;
            camera.position.x = 30;
            camera.position.y = 10;


    
  
      // 3. 创建渲染器
      const renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(window.innerWidth, window.innerHeight);
  
      // 4. 将 canvas 添加进去
      this.$refs.canvasContainer.appendChild(renderer.domElement);
  
      // 5. 创建一个平面
      const planeGeometry = new THREE.PlaneGeometry(150, 150, 10, 10);
      const planeMaterial = new THREE.MeshBasicMaterial({
        color: 0xffffff,
        wireframe: true,
      });
      const plane = new THREE.Mesh(planeGeometry, planeMaterial);
      plane.rotation.x = -Math.PI / 2; // 使平面水平放置
      scene.add(plane);
  
      // 6. 创建球体
      const sphereGeometry = new THREE.SphereGeometry(2.5, 32, 32);
          //添加纹理 
        const texture = new THREE.TextureLoader().load('./textures/sky.jpg')
   
      const sphereMaterial = new THREE.MeshPhongMaterial({
        // color: 0x2194ce,
        map:texture,
        specular: 0xffffff,
            shininess: 100,
        side: THREE.DoubleSide
      });
      const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
            sphere.position.set(0, 0, 0);
            sphere.scale.set(150,150,150)
      scene.add(sphere);
  
      // 7. 创建灯光
      const light = new THREE.PointLight(0xffffff, 1, 100);
      light.position.set(10, 10, 10);
            scene.add(light);
            //创建环境光
             const light2 = new THREE.AmbientLight( 0x404040 ); 
              scene.add( light2 );
      //添加控制器 
            const controls = new OrbitControls(camera, renderer.domElement)
            controls.enableDamping = true;
            controls.screenSpacePanning = false // 禁用屏幕空间平移

       //添加辅助坐标轴
        const axesHelper = new THREE.AxesHelper(100)
       scene.add(axesHelper)



     //创建GLTF实例
            const loader1 = new GLTFLoader
            loader1.load("./model/city.glb", (gltf) => {
          //获取模型
                  const model1 = gltf.scene
                  model1.position.set(0, 0, 0)
                  scene.add(model1)
              },
                // 加载过程中的回调函数
        (xhr) => {
            console.log((xhr.loaded / xhr.total * 100) + '% loaded')
            
        },
        // 加载出错时的回调函数
        (error) => {
            console.error('An error happened', error)
        }

            )
      //加载的大巴车
        //  const loader2 = new GLTFLoader
            loader1.load("./model/bus.gltf", (gltf) => {
                  const model2 = gltf.scene
                  model2.position.set(13, 0, 25)
                  scene.add(model2)
              })
      //加载两辆小车
      loader1.load("./model/car1.gltf", (gltf) => {
                  const model3 = gltf.scene
                  model3.position.set(1, 0, 30)
                  scene.add(model3)
        })     
        loader1.load("./model/car2.gltf", (gltf) => {
                  const model3 = gltf.scene
                  model3.position.set(20, 0, 25)
                  scene.add(model3)
          })   

      
  
      // 8. 渲染场景
      const animate = () => {
            requestAnimationFrame(animate);
       
        sphere.rotation.x += 0.001;
        sphere.rotation.y += 0.001;
            renderer.render(scene, camera); // 修正参数传递错误
        controls.update()
      };
      animate();
    },
  };
  </script>
  <style lang="less" scoped>
  .box {
    width: 100vw;
    height: 100vh;
    // color: red;
  }
  </style>